<template lang="html">
  <section class="wrapper" :class="type">
    <a class="close-btn" @click="hideTips()">{{type}}</a>
  </section>
</template>

<script>
import { mapState,mapGetters} from 'vuex'
export default {
  name: 'chargeTips',
  computed: {
    ...mapGetters(['type'])
  },
  methods: {
    hideTips() {
      this.$store.dispatch('changeType', "pullUp");
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.wrapper {
  width: px2rem(200);
  height: px2rem(200);
  background-color: $red;
  transition: all .5s linear;
  &.pullDown {
    background-color: $blue;
  }
  &.pullUp {
    background-color: $green;
  }
  .close-btn {
    color: $white;
  }
}
</style>
